﻿<script setup lang="ts" name="BpmnProcess">
import { getBpmnProcessListData } from '@/api/bpmnProcess'
import BpmnProcessAddEdit from './components/BpmnProcessAddEdit/index.vue'
import BpmnProcessDrawer from './components/BpmnProcessDrawer/index.vue'

const BpmnProcessAddEditRef = ref(null)

const pageData: any = ref({
  listData: {
    total: 0,
    data: []
  },
  searchData: {
    date: '',
    name: ''
  }
})
const pageIndex = ref(1)
const pageSize = ref(20)

// 页面数据条数改变重新获取数据
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getInitData()
}
// 当前页改变重新获取数据
const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  getInitData()
}
// 重置页面数据
const resetPageData = () => {
  pageData.value.listData.data = []
  pageData.value.listData.total = 0
}
// 获取当前查询条件下的数据
const getInitData = () => {
  resetPageData()
  const result: any = {}
  result.pageIndex = pageIndex.value
  result.pageSize = pageSize.value
  result.date = pageData.value.searchData.date
  result.name = pageData.value.searchData.name
  getBpmnProcessListData(result, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        pageData.value.listData.data = res.data
        pageData.value.listData.total = res.total
      }, 1000)
    }
  })
}
// 查询条件重置
const resetSearch = () => {
  pageData.value.searchData.title = ''
  pageData.value.searchData.status = 1
  getInitData()
}

// 新增事件
const add = () => {
  BpmnProcessAddEditRef.value.showDialog()
}
// 编辑事件
const edit = (item) => {
  BpmnProcessAddEditRef.value.showDialog(item)
}

const deleteRow = (v) => {
  const msg = '确定删除吗？'
  ElMessageBox.alert(msg, '警告', {
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'info',
          message: `操作: 点击了确认`
        })
      } else {
        ElMessage({
          type: 'info',
          message: `操作: 点击了取消`
        })
      }
    }
  })
}

const BpmnProcessDrawerRef = ref(null)
const BpmnProcessDrawerManagement = (item) => {
  BpmnProcessDrawerRef.value.showDrawer(item)
}

onMounted(() => {
  getInitData()
})
</script>

<template>
  <page-wrap direction="column">
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker v-model="pageData.searchData.date" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageData.searchData.name" placeholder="请输入操作账户" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getInitData">查询</el-button>
        <el-button icon="Refresh" @click="resetSearch">重置</el-button>
        <el-button type="success" icon="Plus" @click="add()">新增流程定义</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-1 table-layout">
      <div class="table-wrap">
        <el-table :data="pageData.listData.data" border>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="sort" label="排序" width="80" />
          <el-table-column prop="type" label="分类" width="120" align="center" />
          <el-table-column prop="status" label="状态" width="80" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '有效' : '无效' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="author" label="创建者" width="100" align="center" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="date" label="操作时间" width="180" />
          <el-table-column prop="operate" label="操作" width="240" align="center">
            <template #default="scope">
              <el-button type="primary" icon="Edit" @click="edit(scope.row)"></el-button>
              <el-button type="danger" icon="Delete" @click="deleteRow(scope.row)"></el-button>
              <el-button type="success" @click="BpmnProcessDrawerManagement(scope.row)">模型管理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      v-if="pageData.listData.total > 0"
      v-model:currentPage="pageIndex"
      v-model:page-size="pageSize"
      :page-sizes="[20, 40, 80, 120]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.listData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    <BpmnProcessAddEdit ref="BpmnProcessAddEditRef"></BpmnProcessAddEdit>
    <BpmnProcessDrawer ref="BpmnProcessDrawerRef"></BpmnProcessDrawer>
  </page-wrap>
</template>

<style scoped lang="scss">
.table-layout {
  position: relative;
  margin: var(--el-space) 0 0;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;
    }
  }
}

.el-pagination {
  align-items: center;
  justify-content: flex-end;
  margin: var(--el-space) 0 0;
}
</style>
